<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'

	const listType = ref(1)
	const history = ref([])
	const currentPage = ref(1)
	async function getHistoryList() {
		const res = await http.request({
			url: '/api/user/footPrint',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
				type: listType.value,
			},
		})
		console.log(res)
		history.value = [...history.value, ...res.data]
	}

	async function clearAll() {
		const res = await http.request({
			url: '/api/user/clearFootPrint',
			method: 'POST',
			data: {},
		})
		console.log(res)
		if (res.st == 1) {
			uni.utils.toast('清除成功')
			listType.value = 1
			currentPage.value = 1
			history.value = []
			getHistoryList()
		} else {
			uni.utils.toast(res.msg)
		}
	}

	function changeList(index) {
		history.value = []
		currentPage.value = 1
		listType.value = index
		getHistoryList()
	}

	//跳转购买
	function goBuy(item) {
		if (item.type == 1) {
			uni.navigateTo({
				url: `/homePage/goodsinfo/index?id=${item.goods_id}`,
			})
		} else if (item.type == 2) {
			uni.navigateTo({
				url: `/drawPage/wxDraw/index?id=${item.box_id}`,
			})
		} else if (item.type == 3) {
			uni.navigateTo({
				url: `/drawPage/txDraw/index?id=${item.box_id}`,
			})
		} else if (item.type == 4) {
			uni.navigateTo({
				url: `/drawPage/treasureDraw/index?id=${item.box_id}`,
			})
		}
	}

	function refresh() {
		++currentPage.value
		getHistoryList()
	}

	onMounted(() => {
		getHistoryList()
	})
</script>

<template>
	<view class="bar"> </view>
	<view class="history-content">
		<view class="history-content-top">
			<scroll-view scroll-x="true" style="width: 73vw">
				<view class="top-left">
					<view
						:class="{ active: listType == 1 }"
						@click="changeList(1)"
					>
						商城
					</view>
					<view
						:class="{ active: listType == 2 }"
						@click="changeList(2)"
					>
						无限赏
					</view>
					<view
						:class="{ active: listType == 3 }"
						@click="changeList(3)"
					>
						天选之人
					</view>
					<view
						:class="{ active: listType == 4 }"
						@click="changeList(4)"
					>
						欧皇寻宝
					</view>
				</view>
			</scroll-view>
			<view class="top-right" @click="clearAll">
				<image
					style="width: 112rpx; height: 34rpx"
					src="../../static/clear.png"
					mode=""
				></image>
			</view>
		</view>
		<scroll-view
			scroll-y="true"
			class="scroll-Y"
			style="height: 89vh"
			@scrolltolower="refresh"
		>
			<view class="history-content-list">
				<view
					@click="goBuy(item)"
					class="history-item"
					v-for="(item, index) in history"
					:key="'history' + item.id"
				>
					<view class="item-img">
						<image
							v-if="item.type == 1"
							style="width: 200rpx; height: 200rpx"
							:src="item.goods_img"
							mode="heightFix"
						></image>
						<image
							v-else
							style="width: 200rpx; height: 200rpx"
							:src="item.box_img"
							mode="heightFix"
						></image>
					</view>
					<view class="item-right">
						<view class="item-right-top">
							<view
								v-if="item.type == 1"
								class=""
								style="margin-bottom: 26rpx; font-size: 28rpx"
							>
								{{ item.goods_name }}
							</view>
							<view
								v-else
								class=""
								style="margin-bottom: 26rpx; font-size: 28rpx"
							>
								{{ item.box_name }}
							</view>
							<view
								v-if="item.type == 1"
								class=""
								style="font-size: 24rpx; color: #9b9b9d"
							>
								{{ item.spec }}
							</view>
						</view>

						<view class="item-right-bottom">
							<view
								style="font-size: 22rpx; color: #7863ff"
								v-if="item.type == 1 && item.is_integral == 0"
								>￥{{ item.goods_price }}</view
							>
							<view
								style="font-size: 22rpx; color: #7863ff"
								v-else-if="
									item.type == 1 && item.is_integral == 1
								"
								>积分 {{ item.integral }}</view
							>
							<view
								style="font-size: 22rpx; color: #7863ff"
								v-else
								>￥{{ item.box_price }}</view
							>
							<view class="buy-again"> 去购买> </view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<style lang="scss" scoped>
	.bar {
		height: 20rpx;
		background-color: #f5f5f5;
	}
	.history-content {
		padding: 20rpx;
		.history-content-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 36rpx;
			.top-left {
				display: flex;
				align-items: center;
				flex-shrink: 0;
				view {
					flex-shrink: 0;
					width: 156rpx;
					height: 48rpx;
					margin-right: 22rpx;
					box-sizing: border-box;
					border-radius: 24rpx;
					background-color: #f7f7f7;
					text-align: center;
					line-height: 48rpx;
					font-size: 24rpx;
				}
				.active {
					background-color: $all-color;
					color: #fff;
				}
			}
		}
		.history-content-list {
			.history-item {
				display: flex;
				align-items: center;
				margin-bottom: 42rpx;
				.item-img {
					width: 200rpx;
					height: 200rpx;
					margin-right: 22rpx;
					box-sizing: border-box;
					border-radius: 8rpx;
					overflow: hidden;
					flex-shrink: 0;
				}
				.item-right {
					width: 100%;
					height: 200rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.item-right-bottom {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.buy-again {
							width: 126rpx;
							height: 44rpx;
							border-radius: 22rpx;
							background-color: $all-color;
							font-size: 22rpx;
							color: #fff;
							line-height: 44rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>
